<!--
 @description 商品主页
 @fileName index.vue
 @author zengqiongying
 @created 2022/12/29 13:13:04
-->
<template>
  <div class="goods-page" :style="{'padding-top':topHeight+'px'}">
    <div ref="top" class="goods-page-head">
      <MineHeader bg-color="" show-statusbar>
        <SearchInput placeholder="搜索" @focus="handleSearch" />
      </MineHeader>
    </div>
    <div ref="leftTabs" class="one-level-nav" :style="{'top':topHeight+'px'}" @touchstart.stop="" @touchend.stop="" @touchmove.stop="">
      <Scroll vertical class="scroll-height" :style="{'max-height':`calc(100vh - ${topHeight}px)`}" @click.native.stop>
        <div v-for="(item,i) in navList" :key="i" :class="['nav-item',{'active':firstNavId===item.id}]" @click="handleClickOneLevel(item)">
          <!-- <div v-if="item.picUrl && item.picUrl.indexOf('icon-')===0" :class="['iconfont', 'icon',item.picUrl]" /> -->
          <div class="name">{{ item.tabName }}</div>
        </div>
      </Scroll>
    </div>
    <div v-if="!!(activeNavData)" class="page-container">
      <template v-if="activeNavData.children && activeNavData.children.length">
        <NavList :list="activeNavData.children" />
      </template>
      <template v-else-if="activeNavData.gotoType==='GOODS_CATE'">
        <GoodsCate is-inline :off-top="topHeight" />
      </template>
      <template v-else-if="activeNavData.gotoType==='ATLAS'">
        <AtlasList is-inline :off-top="topHeight" />
      </template>
      <template v-else-if="activeNavData.gotoType==='DEFINE_TAB'">
        <DefineNavList is-inline :off-top="topHeight" :off-left="leftNavWidth" :conf-id="activeNavData.gotoValue" />
      </template>
    </div>
    <Tabbar @refresh="refreshPage" />
  </div>
</template>

<script>
import Tabbar from '@/components/Tabbar'
import MineHeader from '@/components/MineHeader'
import SearchInput from '@/components/SearchInput'
import Scroll from '@/components/Scroll'
import NavList from './components/NavList'
import GoodsCate from './Category/index'
import AtlasList from '../atlas'
import DefineNavList from '../defineTab/Navigation'
import { mapGetters } from 'vuex'
import { getTabTree, getHomePageTabDefine } from '@/apis/index'
export default {
  name: 'GoodsIndex',
  components: { Tabbar, SearchInput, MineHeader, Scroll, NavList, GoodsCate, AtlasList, DefineNavList },
  filters: {},
  mixins: [],
  data() {
    return {
      imgHost: `${process.env.VUE_APP_STATIC}`,
      topHeight: 64,
      leftNavWidth: 90,
      navList: [],
      firstNavId: '' // 当前所选一级导航
    }
  },
  computed: {
    ...mapGetters(['statusBarHeight']),
    activeNavData() {
      return this.navList.find(v => v.id === this.firstNavId)
    }
  },

  created() {
    this.getNavList()
  },
  activated() {

  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.topHeight = this.$refs.top.offsetHeight
        this.leftNavWidth = this.$refs.leftTabs.offsetWidth
      }, 100)
    })
  },

  methods: {
    refreshPage(name) {
      if (this.$route.name === name) {
        this.getNavList()
      }
    },
    async getNavList() {
      const defineId = await getHomePageTabDefine()
      getTabTree(defineId).then(res => {
        this.navList = res.data || []
        const tmpArr = this.navList.filter(v => {
          // 一级导航内嵌展示条件为：有子级、无子级(商品分类、图册、自定义导航-导航)
          if (v.children && v.children.length > 0) {
            return true
          }
          return ['GOODS_CATE', 'ATLAS'].includes(v.gotoType) || (v.gotoType === 'DEFINE_TAB' && Number(v.subGotoType || 0) === 1)
        })
        if (tmpArr.length > 0) {
          this.firstNavId = tmpArr[0].id
        }
      })
    },
    getImageUrl(url) {
      return this.$formatURL(url, this.imgHost)
    },
    handleSearch() {
      this.$router.push({
        path: '/search/product'
      })
    },
    handleClickOneLevel(d) {
      // 一级导航内嵌展示条件为：有子级、无子级(商品分类、图册、自定义导航-导航)
      if ((d.children && d.children.length > 0) || ['GOODS_CATE', 'ATLAS'].includes(d.gotoType) || (d.gotoType === 'DEFINE_TAB' && Number(d.subGotoType || 0) === 1)) {
        this.firstNavId = d.id
        return
      }
      d.routerTitle = d.tabName
      this.$gotoPage(d, this.$router)
      return

      // if ((!d.children || d.children.length === 0) && !['GOODS_CATE', 'ATLAS', 'DEFINE_TAB'].includes(d.gotoType)) {
      //   d.routerTitle = d.tabName
      //   this.$gotoPage(d, this.$router)
      //   return
      // }
      // this.firstNavId = d.id
    }

  }
}

</script>
<style lang='less' scoped>
.goods-page-head{
  position: fixed;
  left: 0;
  top: 0;
  width:100%;
  z-index: 99;
  background: url(~@/assets/my/bg-header.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  /deep/ .search-input{
    position: relative;
    flex: 1;
    .search{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      margin-left: -20px;
    }
    .search-value{
      background: transparent;
      text-align: center;
      font-size: 14px;
      padding-left: 10px;
    }
  }
}

.goods-page{
  padding-bottom:50px;
  min-height: 100vh;
  box-sizing: border-box;
}
.one-level-nav{
  position: fixed;
  z-index:9;
  left: 0;
  bottom:50px;
  width:90px;
  background: #fff;
  .nav-item{
    height: 56px;
    padding:0 16px;
    align-items: center;
    color: #333333;
    font-size: 14px;
    display: flex;
    align-items: center;
    .icon{
      width: 24px;
      height: 24px;
      line-height: 1;
      overflow: hidden;
      margin-right: 8px;
      font-size: 24px;
    }
    .name{
      font-weight: bold;
      white-space: nowrap;
    }
    &.active{
      color:#00C8B4;
      .icon{
        color:#00C8B4;
      }
      /* .icon img{
        margin-left: -24px;
        -webkit-filter: drop-shadow(24px 0 0 #fff);
        filter: drop-shadow(24px 0 0 #00C8B4);
      } */
    }
  }
}
.page-container{
  padding-left:90px;
  position: relative;
}
.scroll-height{
  background-color: #fff;
  padding-bottom: 50px;
  box-sizing: border-box;
}
</style>
